<template>
    <main>
        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
            <div class="form-content">
                <el-form-item prop="username">
                    <el-input name="username" type="text" v-model="loginForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password" type="password" v-model="loginForm.password" @keyup.enter.native="handleLogin" placeholder="密  码"></el-input>
                </el-form-item>
                <el-form-item>                    
                    <el-button type="primary" @click.native.prevent="handleLogin">登&nbsp;&nbsp;录</el-button>
                </el-form-item>
            </div>
        </el-form>
    </main>
</template>

<script>
    export default {
       
        name: "login",
        data() {
            const validateUsername = (rule, value, callback) => {
                if (value.length < 1) {
                    callback(new Error('请输入正确的用户名'))
                } else {
                    callback()
                }
            }

            const validatePassword = (rule, value, callback) => {
                if (value.length < 6) {
                    callback(new Error('请输入不小6位数的密码'))
                } else {
                    callback()
                }
            }

            return {
                loginForm: {
                    username: 'buynow96',
                    password: '123456'
                },
                loginRules: {
                    username: [{required: true, trigger: 'blur', validator: validateUsername}],
                    password: [{required: true, trigger: 'blur', validator: validatePassword}]
                }
            }
        },
        methods: {
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.$store.dispatch('Login', this.loginForm).then(() =>{
                            this.$router.push({path: '/'})
                        }).catch((e) =>{
                             console.log('验证失败'+e)
                        })
                    } else {
                        console.log('验证失败')
                        return false
                    }
                })
            }
        }
    }
</script>

<style scoped>
    main{
        padding-top: 100px;
        padding-bottom: 100px;
    }

    main>div{
        margin: 0 auto;
        width: 400px;
        height: 400px;
        background-color: #fff;
        background-color: #ffffff;
        border-top: 10px solid #004a98;
    }
    main>div>.form-content{
        width: 300px;
        margin: 0 auto;
        padding-top: 70px;
        text-align: center;
    }
    main>div>.form-content>*{
        margin-bottom: 30px;
        width: 100%;
    }
</style>
